<template>
    <div class="main-box">
        <div class="choose-company-box" v-if="showCompanyBox">
            <div class="choose-company-alert">
                <div class="top-box">
                    选择组织
                    <img src="@/assets/icon/X.png" class="close-button fr pointer" @click="closeBox"/>
                </div>
                <p class="text">检测到您当前加入了多个组织，<br>请为协作文件夹选择一个组织</p>
                <div class="select-box pointer relative">
                    <p>选择组织</p>
                    <i class="drop-down-icon"></i>
                </div>
            </div>
        </div>
        <div class="header">
            <img class="logo fl" src="@/assets/icon/logo.png" alt/>
            <h2 class="header-title fl">担当企业云盘 | 邀您加入</h2>
        </div>
        <div class="aletr-box">
            <h1 class="title text-center" v-show="pageStatus < 3">
                <span>加油科技有限公司</span> 的 <span class="user-name">罗小晋</span>，邀请您加入协作文件夹
            </h1>
            <h1 class="title text-center" v-show="pageStatus === 3">
                完善信息
            </h1>
            <h1 class="title timeout text-center" v-show="pageStatus === 4">
                加油科技有限公司 的 罗小晋，邀请您加入协作文件夹
            </h1>
            <div v-show="pageStatus === 1">
                <div class="file-box">
                    <check-icon class="file-icon fl"></check-icon>
                    <p class="fl file-name ellipsis">园区项目文件夹园区项目文件夹</p>
                </div>
                <button class="next-button" @click="joinNow">立即加入</button>
                <div class="prompt-box">
                    <img class="fl" src="@/assets/icon/invite/prompt_icon.png">
                    <p class="fl">
                        为避免您误入不必要的协作文件夹，在您填写完资料后，<br>
                        需协作文件夹管理员同意后，才可加入当前协作文件夹
                    </p>
                </div>
            </div>
            <div v-show="pageStatus === 2">
                <div class="form-box">
                    <div class="input-box">
                        <p class="fl label">手机号</p>
                        <div class="input fr">
                            <input placeholder="请输入常用手机号"/>
                        </div>
                    </div>
                    <div class="input-box">
                        <p class="fl label">验证码</p>
                        <div class="input fr">
                            <input class="fl" placeholder="请输入验证码" style="width: 210px"/>
                            <button class="code-button fr">获取验证码</button>
                        </div>
                    </div>
                    <div class="input-box">
                        <p class="fl label">申请验证</p>
                        <div class="input fr" style="height: 72px">
                            <textarea placeholder="请输入常用手机号"/>
                        </div>
                    </div>
                </div>
                <button class="next-button" @click="joinNow">立即加入</button>
                <div class="prompt-box" style="width: 355px">
                    <img class="fl" src="@/assets/icon/invite/prompt_icon.png">
                    <p class="fl">
                        若您当前尚未拥有担当系列产品账号，点击"确认"需要完善资料
                    </p>
                </div>
            </div>

            <div v-show="pageStatus === 3">
                <div class="user-info-box">
                    <input placeholder="请输入您的姓名"/>
                    <input placeholder="请设置6-16字母和数字组合密码" type="password"/>
                </div>
                <button class="next-button" @click="joinNow">开始使用</button>
                <h3 class="protocol text-center">点击开始使用代表您已同意我们的<a>《担当云盘服务协议和隐私协议》</a></h3>
                <p class="text-center font-12" style="margin-top: 43px">您是我们的新用户哦，完善信息并确认加入后，您就拥有担当系列产品账号了</p>
                <div class="info-fotter font-12">
                    <p class="fl label">该账号可登录</p>
                    <a class="fl link" href="https://pan.ddbes.com">担当企业云盘</a>
                    <a class="fl link" href="https://ams.ddbes.com">担当云资产</a>
                    <a class="fl link" href="https://oa.ddbes.com">担当办公</a>
                </div>
            </div>

            <div v-show="pageStatus === 4">
                <div class="file-box">
                    <check-icon class="file-icon fl"></check-icon>
                    <p class="fl file-name ellipsis timeout">园区项目文件夹园区项目文件夹</p>
                </div>
                <button class="next-button timeout-button" >该邀请已失效</button>
                <div class="prompt-box" style="width: 190px">
                    <img class="fl" src="@/assets/icon/invite/prompt_icon.png">
                    <p class="fl timeout">可联系管理员重新发送邀请链接</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import CheckIcon from '@/components/CheckIcon.vue'

  export default {
    components: {
      CheckIcon
    },
    data() {

      return {
        showCompanyBox: false,
        pageStatus: 3,
      }
    },
    mounted() {
      console.log('---------------')
    },
    methods: {
      closeBox: function () {
        this.showCompanyBox = false
      },
      joinNow: function () {

      }
    }
  }
</script>

<style scoped>
    .choose-company-box {
        position: fixed;
        height: 100vh;
        width: 100vw;
        z-index: 200;
        background: rgba(0, 0, 0, 0.5);
    }

    .choose-company-box .choose-company-alert {
        width: 460px;
        height: 260px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        margin: calc(50vh - 230px) auto;
    }

    .choose-company-box .choose-company-alert .select-box {
        width: 300px;
        height: 40px;
        border: 1px solid rgba(215, 215, 215, 1);
        border-radius: 4px;
        margin-left: 77px;
    }

    .choose-company-box .choose-company-alert .select-box p {
        line-height: 38px;
        font-size: 14px;
        padding-left: 10px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .choose-company-box .choose-company-alert .top-box {
        padding: 0 20px;
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        border-bottom: #F4F4F4 solid 1px;
    }

    .choose-company-box .choose-company-alert .top-box .close-button {
        height: 15px;
        width: 15px;
        margin: 16px 0;
    }

    .choose-company-box .choose-company-alert .text {
        font-size: 14px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        margin: 32px 77px 19px;
        line-height: 25px;
    }

    .user-info-box {
        width: 320px;
        margin: auto;
        padding-top: 20px;
    }

    .user-info-box input {
        width: 320px;
        height: 36px;
        border: 1px solid rgba(205, 205, 205, 1);
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        padding: 0 10px;
        margin-top: 20px;
    }

    .info-fotter {
        width: 406px;
        margin: 17px auto 0;
        height: 150px;
    }
    .info-fotter .label{
        margin-right: 14px;
        width: 93px;
        border-right: #8E9DAB solid 1px;
    }

    .info-fotter .label:before{
        content: '';
        position: absolute;
    }

    .info-fotter .link{
        margin: 0 14px;
    }

    .font-12 {
        font-size: 12px;
        color: rgba(142, 157, 171, 1);
    }

    .protocol {
        font-size: 12px;
        color:rgba(142,157,171,1);
        margin-top: 20px;
    }

    .main-box {
        height: 100vh;
        width: 100vw;
        background: rgba(241, 245, 248, 1);
    }


    .main-box .header {
        height: 60px;
        background: white;
    }

    .main-box .header .header-title {
        font-size: 16px;
        font-weight: bold;
        color: rgba(50, 50, 50, 1);
        line-height: 60px;
    }

    .main-box .header .logo {
        height: 28px;
        margin: 16px 9px 16px 40px;
    }

    .aletr-box {
        width: 860px;
        min-height: 500px;
        border-radius: 10px;
        background-color: #FFFFFF;
        background-image: url("/icon/invite/invite_background.png");
        background-repeat: no-repeat;
        background-size: 100%;
        margin: calc(50vh - 310px) auto 0;
        background-position: bottom -4px right 0;
    }

    .title {
        padding-top: 86px;
        font-size: 20px;
        font-weight: bold;
        color: rgba(50, 50, 50, 1);
    }

    .title .user-name {
        color: #1E87F0
    }

    .timeout{
        color:#999999;

    }

    .form-box {
        width: 380px;
        margin: 39px auto 0;
        height: 182px;
    }

    .input-box {
        height: 36px;
        margin-top: 20px;
    }

    .input-box .label {
        line-height: 36px;
        width: 60px;
        text-align: left;
        height: 14px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(50, 50, 50, 1);
    }

    .input-box .input {
        width: 300px;
        height: 36px;
        border: 1px solid rgba(205, 205, 205, 1);
        border-radius: 4px;
    }

    .input-box .input .code-button {
        font-size: 12px;
        font-weight: 500;
        color: rgba(30, 135, 240, 1);
        width: 75px;
        height: 34px;
        border: none;
        border-radius: 5px;
        position: relative;
    }

    .input-box .input .code-button:before {
        height: 20px;
        width: 1px;
        content: '';
        position: absolute;
        background: rgba(226, 226, 226, 1);
        left: 0;
    }

    .input-box .input input {
        font-size: 14px;
        width: 99%;
        padding-left: 20px;
        margin-left: 2px;
        height: 34px;
        border: none;
    }

    .input-box .input textarea {
        padding-top: 8px;
        font-size: 14px;
        line-height: 22px;
        height: 100%;
        width: 99%;
        padding-left: 20px;
        margin-left: 2px;
        border: none;
        resize: none
    }

    .file-box {
        width: 280px;
        height: 132px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 8px 19px 1px rgba(201, 201, 201, 0.45);
        border-radius: 10px;
        margin: 50px auto 0;
    }

    .file-box .file-icon {
        transform: scale(2);
        margin: 51px 26px;
    }

    .file-box .file-name {
        line-height: 130px;
        width: 195px;
    }

    .next-button {
        font-size: 14px;
        color: white;
        font-weight: 400;
        width: 320px;
        height: 38px;
        background: rgba(30, 135, 240, 1);
        border-radius: 4px;
        border: none;
        display: block;
        margin: 29px auto 0;
    }

    .timeout-button{
        background:rgba(205,205,205,1);
        pointer-events:none1
    }

    .prompt-box {
        width: 380px;
        margin: 18px auto 0;
        clear: both;
        height: 135px;
    }

    .prompt-box img {
        height: 14px;
        width: 14px;
        margin-top: 2px;
    }

    .prompt-box p {
        margin-left: 2px;
        display: inline;
        font-size: 12px;
        font-weight: 500;
        color: rgba(175, 188, 201, 1);
        line-height: 18px;
    }

</style>
